<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/public.css" />
		<link rel="stylesheet" href="../css/search.css" />
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script src="../js/public.js"></script>
		<style type="text/css">
			.cs_list_title{
				width: 100%;
				height: 44px;
				line-height: 44px;
				font-size: 14px;
				font-weight: bold;
				color: #7d7d7d;
				border: 1px solid #e9e9e9;
				box-sizing: border-box;
			}
			.cs_list_box{
				padding: 15px 0;
			}
			.cs_list_item{
				height: 30px;
				line-height: 30px;
				color: #858585;
				font-size: 12px;
			}
			.t_indent20{
				text-indent: 20px;
			}
			.cs_list_item_a{
				margin-right:0;
				padding: 0;
				width: 100%;
			}
		</style>
		<title>基金搜索列表</title>
	</head>
	<body>
		<header id="header" class="mui-bar mui-bar-nav jjs-header">
			<h2 class="mui-title">基金</h2>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left header-left-result"></a>
			<a class="mui-icon mui-icon-bars mui-pull-right header-right"></a>
		</header>
		
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron">
					<div class="cs_list_title flex-box t_cen">
						<div class="flex-1">
							编号
						</div>
						<div class="flex-1">
							代码
						</div>
						<div class="flex-2">
							基金简称
						</div>
						<div class="flex-1">
							基金管理人
						</div>
					</div>
					<div class="cs_list_box">
						<li class="mui-table-view">
							<a href="" class="cs_list_item_a">
								<div class="flex-box cs_list_item t_cen">
									<div class="flex-1">
										1
									</div>
									<div class="flex-1">
										360020
									</div>
									<div class="flex-2 t_left t_indent20">
										华安中证全指证券
									</div>
									<div class="flex-1">
										黄志良
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view">
							<a href="" class="cs_list_item_a">
								<div class="flex-box cs_list_item t_cen">
									<div class="flex-1">
										1
									</div>
									<div class="flex-1">
										360020
									</div>
									<div class="flex-2 t_left t_indent20">
										华安中证全指证券
									</div>
									<div class="flex-1">
										黄志良
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view">
							<a href="" class="cs_list_item_a">
								<div class="flex-box cs_list_item t_cen">
									<div class="flex-1">
										1
									</div>
									<div class="flex-1">
										360020
									</div>
									<div class="flex-2 t_left t_indent20">
										华安中证全指证券
									</div>
									<div class="flex-1">
										黄志良
									</div>
								</div>
							</a>
						</li>
					</div>
					
					
				</ul>
			</div>
		</div>
		
		
		<div class="mui-content">
			
			
			<!--<div class="cs_list_box">
				<div class="flex-box cs_list_item t_cen">
					<div class="flex-1">
						1
					</div>
					<div class="flex-1">
						360020
					</div>
					<div class="flex-2 t_left t_indent20">
						华安中证全指证券
					</div>
					<div class="flex-1">
						黄志良
					</div>
				</div>
				<div class="flex-box cs_list_item t_cen">
					<div class="flex-1">
						1
					</div>
					<div class="flex-1">
						360020
					</div>
					<div class="flex-2 t_left t_hide t_indent20">
						华安中证全指证券
					</div>
					<div class="flex-1">
						黄志良
					</div>
				</div>
				<div class="flex-box cs_list_item t_cen">
					<div class="flex-1">
						1
					</div>
					<div class="flex-1">
						360020
					</div>
					<div class="flex-2 t_left t_hide t_indent20">
						华安中证全指证券bgfljehbjeh加绒款人接
					</div>
					<div class="flex-1">
						黄志良
					</div>
				</div>
			</div>-->
		
		
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					var table = document.body.querySelector('.cs_list_box');
					var cells = document.body.querySelectorAll('.mui-table-view');
					for (var i = cells.length, len = i + 3; i < len; i++) {
//						在列表最前面插入三条记录
						var html= '<li class="mui-table-view">'
								+'		<a href="" class="cs_list_item_a">'
								+'			<div class="flex-box cs_list_item t_cen">'
								+'				<div class="flex-1">'
								+'					1'
								+'				</div>'
								+'				<div class="flex-1">'
								+'					360020'
								+'				</div>'
								+'				<div class="flex-2 t_left t_indent20">'
								+'					华安中证全指证券'
								+'				</div>'
								+'				<div class="flex-1">'
								+'					黄志良'
								+'				</div>'
								+'			</div>'
								+'		</a>'
								+'	</li>'; 
						$('.cs_list_box').prepend(html);
					}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1500);
			}
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(1<2); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = i + 5; i < len; i++) {
//						上拉往列表屁股后追加5条 for循环模拟 实际请循环接口数据
						var html= '<li class="mui-table-view">'
								+'		<a href="" class="cs_list_item_a">'
								+'			<div class="flex-box cs_list_item t_cen">'
								+'				<div class="flex-1">'
								+'					1'
								+'				</div>'
								+'				<div class="flex-1">'
								+'					360020'
								+'				</div>'
								+'				<div class="flex-2 t_left t_indent20">'
								+'					华安中证全指证券'
								+'				</div>'
								+'				<div class="flex-1">'
								+'					黄志良'
								+'				</div>'
								+'			</div>'
								+'		</a>'
								+'	</li>'; 
						$('.cs_list_box').append(html);
					}
				}, 1500);
			}

		</script>
		</div>
	</body>
</html>
